<extend name="zh_tw:Public:base" />
<block name="title">
    <title>美住 - 訂單管理</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/common_control.css?rev=bdf8875f9e52f651ec877dc7073586ed">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/OrderPage/index.css?rev=5d9458974a5c1d5f86b1870c10601af0">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/BookPage/order.css?rev=0228ecd68944d8baa680650fa306d15d2">
    <link rel="stylesheet" type="text/css" media="all" href="__PUBLIC__/jslib/bootstrap-daterangepicker/daterangepicker.css" />
</block>
<block name="document">
    <div id="doc" class="container-above-md" data-today="{:date('Y-m-d')}">
        <include file="zh_tw:Public:Include_control_navbar" navbar-menu-order="active" />
        <include file="zh_tw:Public:Include_content_loading" loading-container-id="mainLoading" loading-title="" />
        <include file="zh_tw:Public:Include_card_loading" loading-card-id="cardLoading" loading-title="" />
        <div id="doc-body" class="row">
         <include file="zh_tw:Public:Include_order_menu" doc-side-order="active" />
            <div id="doc-center">
                <div id="filterHeader" class="typo-text-black-deep">
                    <div class="border-box">
                        <div class="row">
                            <div class="col-without-padding">
                                <div class="dropdown" id="dateStatus-switch">
                                    <ul class="dropdown-menu dropdown-menu-left">
                                        <switch name="dateStatus">
                                            <case value="order">
                                                <assign name="filterDateStatusName" value="錄入日期" />
                                            </case>
                                            <case value="checkin">
                                                <assign name="filterDateStatusName" value="入住日期" />
                                            </case>
                                            <case value="checkout">
                                                <assign name="filterDateStatusName" value="退房日期" />
                                            </case>
                                            <default />
                                                <assign name="filterDateStatusName" value="錄入日期" />
                                        </switch>
                                        <li class='<eq name="dateStatus" value="order">active</eq>' data-value="order"><a href="javascript:void(0);">錄入日期</a></li>
                                        <li class='<eq name="dateStatus" value="checkin">active</eq>' data-value="checkin"><a href="javascript:void(0);">入住日期</a></li>
                                        <li class='<eq name="dateStatus" value="checkout">active</eq>' data-value="checkout"><a href="javascript:void(0);">退房日期</a></li>
                                    </ul>
                                    <a data-toggle="dropdown" id="filterDateType" class="without-min-width btn" data-value="{$dateStatus}" href="javascript:void(0);"><span class="info">{$filterDateStatusName}</span><span class="caret"></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="border-box" id="datePickerContainer" style="width: 180px;position: relative;">
                        <div class="row">
                            <div class="col-without-padding">
                                <div id="datePicker"><span class="iconfont icon-calendar"></span>&nbsp;<span class="start">{$startDate}</span>&nbsp;~&nbsp;<span class="end">{$endDate}</span></div>
                                <input id="datePickerInput" value="" />
                            </div>
                        </div>
                    </div>
                    <div class="border-box">
                        <div class="dropdown" id="rooms-switch">
                            <ul class="dropdown-menu dropdown-menu-left dropdown-menu-expand" id="filterRoomMenu">
                                <div class="scrollContainer"> 
                                    <li class='<empty name="filterRoomId">active<assign name="filterRoomName" value="所有房間" data-value=""/></empty>'><a href="javascript:void(0);">所有房間</a></li>
                                    <volist name="rooms" id="roomType">
                                        <volist name="roomType['room']" id="room">
                                            <li class='<eq name="room.id" value="$filterRoomId">active<assign name="filterRoomName" value="$room.name" /></eq>' data-from="{$room.roomfrom}" data-name="{$room.name}" data-value="{$room.id}" data-type-value="{$roomType.id}" data-price="{$roomType.price}"><a href="javascript:void(0);">{$room.name}<if condition="$room.isdelete eq 1"><span class="text-accent">(已刪除)</span></if></a></li>
                                        </volist>
                                    </volist>
                                </div>
                            </ul>
                            <a data-toggle="dropdown" id="filterRoom" data-value="{$filterRoomId}" class="without-min-width btn" href="javascript:void(0);"><span class="info">{$filterRoomName}</span><span class="caret"></span></a>
                        </div>
                    </div>
                    <div class="border-box">
                        <div class="dropdown" id="channel-switch">
                            <ul class="dropdown-menu dropdown-menu-left dropdown-menu-expand">
                                <div class="scrollContainer"> 
                                    <li class='<empty name="filterChannelId">active<assign name="filterChannelName" value="所有渠道" data-value=""/></empty>'><a href="javascript:void(0);">所有渠道</a></li>
                                    <volist name="hotelchannel" id="channel">
                                        <li class='<eq name="channel.id" value="$filterChannelId" data-value="">active<assign name="filterChannelName" value="$channel.name" /></eq>' data-value="{$channel.id}"><a href="javascript:void(0);">{$channel.name}</a></li>
                                    </volist>
                                </div>
                            </ul>
                            <a data-toggle="dropdown" id="filterChannel" data-value="{$filterChannelId}" class="without-min-width btn" href="javascript:void(0);"><span class="info">{$filterChannelName}</span><span class="caret"></span></a>
                        </div>
                    </div>
                    <div class="border-box">
                        <div class="dropdown" id="orderStatus-switch">
                            <ul class="dropdown-menu dropdown-menu-left">
                                <div class="scrollContainer">
                                    <php>
                                        if(is_null($filterOrderStatus)) {
                                            echo '<li class="active" data-value=""><a href="javascript:void(0);">所有狀態</a></li>';
                                            $filterOrderStatusName = '所有狀態';
                                            foreach($orderStatus as $key => $status){
                                                 echo '<li data-value="'.$key.'"><a href="javascript:void(0);">'.$status.'</a></li>';
                                            }
                                        } else {
                                            echo '<li data-value=""><a href="javascript:void(0);">所有狀態</a></li>';
                                            foreach($orderStatus as $key => $status){
                                                if ($key == $filterOrderStatus) {
                                                    $filterOrderStatusName = $status;
                                                    echo '<li class="active" data-value="'.$key.'"><a href="javascript:void(0);">'.$status.'</a></li>';
                                                } else {
                                                    echo '<li data-value="'.$key.'"><a href="javascript:void(0);">'.$status.'</a></li>';
                                                }
                                            }
                                        }
                                    </php>
                                </div>
                            </ul>
                            <a data-toggle="dropdown" id="filterOrderStatus" data-value="{$filterOrderStatus}" class="without-min-width btn" href="javascript:void(0);"><span class="info">{$filterOrderStatusName}</span><span class="caret"></span></a>
                        </div>
                    </div>
                    <div class="border-box" style="width: 180px;">
                        <div class="row">
                            <input id="filterName" class="form-control" type="text" autocomplete="off" placeholder="姓名" value="{$filterName}" />
                        </div>
                    </div>
                    <div class="btn-sm btn-accent btn-raised" id="filterSearch">查詢</div>
                </div>
                <div class="content-panel">
                    <div class="content-panel-header">
                        <div class="content-panel-operation">
                            <a class="btn-link" href="/Home/Order/exportList?hotel={$currentHotel}&datestatus={$dateStatus}&start={$startDate}&end={$endDate}<if condition='isset($filterOrderStatus)'>&status={$filterOrderStatus}</if><if condition='isset($filterRoomId)'>&room={$filterRoomId}</if><if condition='isset($filterChannelId)'>&channel={$filterChannelId}</if> <if condition='isset($filterName)'>&name={$filterName}</if>">導出表格</a>
                        </div>
                    </div>
                    <div class="content-panel-body">
                        <table class="table content-panel-table">
                            <thead>
                                <tr>
                                    <th>錄入時間</th>
                                    <th>入住人</th>
                                    <th>手機號</th>
                                    <th>渠道</th>
                                    <th>入住/退房日期</th>
                                    <th>房間號</th>
                                    <th>金額</th>
                                    <th>義賣金額</th>
                                    <th>訂單狀態</th>
                                    <th>更多</th>
                                </tr>
                            </thead>
                            <tbody id="orderListBody">
                                <volist name="order" id="info">
                                    <tr data-value="{$info.id}" data-porder='{$info.order.id}'>
                                        <td class="col-xs-2">
                                            <div>{$info.createtime}</div>
                                        </td>
                                        <td class="col-xs-1">
                                            <div>{$info.name}</div>
                                        </td>
                                        <td class="col-xs-1">
                                            <div>{$info.mobile}</div>
                                        </td>
                                        <td class="col-xs-1">
                                            <div>{$info.order.channelName}</div>
                                        </td>
                                        <td class="col-xs-1">
                                            <div>{$info.startdate}　-　{$info.enddate}</div>
                                        </td>
                                        <td class="col-xs-2">
                                            <div>{$info.roominfo_name}<if condition="$info.roomInfoDelete eq 1"><span class="text-accent">(已刪除)</span></if></div>
                                        </td>
                                        <td class="col-xs-1">
                                            <div>{$info.payment}</div>
                                        </td>
                                        <td class="col-xs-1">
                                            <div>{$info.order.charityprice}</div>
                                        </td>
                                        <td class="col-xs-1">
                                            <div>{$orderStatus[$info['status']]}</div>
                                        </td>
                                        <td class="col-xs-1" data-value="{$info.roominfo_id}">
                                            <div class="btn-link checkDetailBtn order-item" data-parent="{$info.orderinfo_id}" data-value="{$info.id}">詳情</div>
                                        </td>
                                    </tr>
                                </volist>
                            </tbody>
                        </table>
                    </div>
                    <div class="content-panel-footer">
                        <div class="pull-right">
                            {$pageFooter}
                        </div>
                        <div class="pull-right content-panel-pagination-info">
                            共有&nbsp;<span class="text-accent">{$pageInfo.total}</span>&nbsp;條記錄，總頁數：&nbsp;<span class="text-accent">{$pageInfo.pageTotal}</span>
                        </div>
                    </div>
                    <div id="objectHTML" class="hidden" isTypeJiu = '' isTypeSi = ''></div>
                </div>
            </div>
            <!--end of doc-center-->
        </div>
        <!--end of doc body-->
    </div>
    <!--rf卡提示框-->
    <include file="zh_tw:Public:Include_RF_prompt_modal" />  
    <!--检查房間狀態模态框-->
    <include file="zh_tw:Public:Include_checkout_modal" />  
    <!--end of doc-->
    <include file="zh_tw:Public:Include_order_modal" />
    <!--身份认证模态框-->
    <include file="zh_tw:Public:Include_authentication_modal" />
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/dist/Home/common_control.js?rev=82f49a263c64790b0cf82e846e522ccd"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/moment.js/2.9.0/moment.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/qrcode/jquery-qrcode.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/jslib/cookie/2.1.2/js.cookie.min.js"></script>
    <script type="text/javascript" src="/Public/dist/Home/OrderPage/index.js?rev=da180f777ef30a6bc3a9aa9b5962d63c"></script>
    <script type="text/javascript" src="/Public/dist/Home/BookPage/rfcard.js?rev=0b5ac76c42d55b35f659125e2dcefc22"></script>
    <script type="text/javascript" src="/Public/dist/Home/BookPage/order.js?rev=246f4e3017546630356eae7abc92c5cd3"></script>
</block>
